<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用 JavaScript 实现动画效果</title>
</head>
<body>
<p id="message">Whee!</p>
<script>
    function animationBasicKnowledge() {
        function position() {
            function positionMessage() {
                var supported = document.getElementById;
                if (!supported) {
                    return false;
                }

                var message = document.getElementById('message');
                if (!message) {
                    return false;
                }
                message.style.position = 'absolute';
                message.style.left = '50px';
                message.style.top = '100px';
            }

            function moveMessage() {
                var supported = document.getElementById;
                if (!supported) {
                    return false;
                }

                var message = document.getElementById('message');
                if (!message) {
                    return false;
                }
            }
        }

        function time() {
            var movement;

            function positionMessage() {
                var supported = document.getElementById;
                if (!supported) {
                    return false;
                }

                var message = document.getElementById('message');
                if (!message) {
                    return false;
                }
                message.style.position = 'absolute';
                message.style.left = '50px';
                message.style.top = '100px';
                movement = setTimeout(positionMessage, 5000);
            }

            clearTimeout(movement);
        }

        function timeIncrement() {
            var movement;

            function moveMessage() {
                var supported = document.getElementById;
                if (!supported) {
                    return false;
                }

                var message = document.getElementById('message');
                if (!message) {
                    return false;
                }

                var x = parseInt(message.style.left);
                var y = parseInt(message.style.top);
                if (x == 200 && y == 100) {
                    return true;
                }
                if (x < 200) {
                    x++;
                }
                if (x > 200) {
                    x--;
                }
                if (y < 100) {
                    y++;
                }
                if (y > 100) {
                    y--;
                }
                message.style.left = x + 'px';
                message.style.top = y + 'px';
                movement = setTimeout(moveMessage, 10);
            }
        }

        function abstruct() {
            function moveElement(elementId, finalX, finalY, interval) {
                var supported = document.getElementById;
                if (!supported) {
                    return false;
                }
                var elem = document.getElementById(elementId);
                if (!elem) {
                    return false;
                }
                var x = parseInt(elem.style.left);
                var y = parseInt(elem.style.top);
                if (x == finalX && y == finalY) {
                    return true;
                }
                if (x < finalX) {
                    x++;
                }
                if (x > finalX) {
                    x--;
                }
                if (y < finalY) {
                    y++;
                }
                if (y > finalY) {
                    y--;
                }
                elem.style.left = x + 'px';
                elem.style.top = y + 'px';
                var repeat = 'moveElement(' + elementId + ',' + finalX + ',' + finalY + ',' + interval + ')';
                setTimeout(repeat, interval);
            }

            function positionMessage() {
                var supported = document.getElementById;
                if (!supported) {
                    return false;
                }

                var message = document.getElementById('message');
                if (!message) {
                    return false;
                }

                message.style.position = 'absolute';
                message.style.left = '50px';
                message.style.top = '100px';
                moveElement('message', 125, 25, 20);

                var message2 = document.getElementById('message2');
                if (!message2) {
                    return false;
                }

                message2.style.position = 'absolute';
                message2.style.left = '50px';
                message2.style.top = '50px';
                moveElement('message2', 125, 125, 20);
            }
        }
    }

    function practicalAnimation() {
        function variableScope() {
            function moveElement(elementId, finalX, finalY, interval) {
                var supported = document.getElementById;
                if (!supported) {
                    return false;
                }
                var elem = document.getElementById(elementId);
                if (!elem) {
                    return false;
                }
                if (elem.movement) {
                    clearTimeout(elem.movement);
                }
                var x = parseInt(elem.style.left);
                var y = parseInt(elem.style.top);
                if (x == finalX && y == finalY) {
                    return true;
                }
                if (x < finalX) {
                    x++;
                }
                if (x > finalX) {
                    x--;
                }
                if (y < finalY) {
                    y++;
                }
                if (y > finalY) {
                    y--;
                }
                elem.style.left = x + 'px';
                elem.style.top = y + 'px';
                var repeat = 'moveElement(' + elementId + ',' + finalX + ',' + finalY + ',' + interval + ')';
                elem.meovment = setTimeout(repeat, interval);
            }
        }

        function improvedAnimations() {
            function moveElement(elementId, finalX, finalY, interval) {
                var supported = document.getElementById;
                if (!supported) {
                    return false;
                }
                var elem = document.getElementById(elementId);
                if (!elem) {
                    return false;
                }
                if (elem.movement) {
                    clearTimeout(elem.movement);
                }
                var x = parseInt(elem.style.left);
                var y = parseInt(elem.style.top);
                var dist = 0;
                if (x == finalX && y == finalY) {
                    return true;
                }
                if (x < finalX) {
                    dist = Math.ceil((finalX - x) / 10);
                    x += dist;
                }
                if (x > finalX) {
                    dist = Math.ceil((finalX - x) / 10);
                    x -= dist;
                }
                if (y < finalY) {
                    dist = Math.ceil((finalX - y) / 10);
                    y += dist;
                }
                if (y > finalY) {
                    dist = Math.ceil((finalX - y) / 10);
                    y -= dist;
                }
                elem.style.left = x + 'px';
                elem.style.top = y + 'px';
                var repeat = 'moveElement(' + elementId + ',' + finalX + ',' + finalY + ',' + interval + ')';
                elem.meovment = setTimeout(repeat, interval);
            }
        }

        function addSecurityChecking() {
            function moveElement(elementId, finalX, finalY, interval) {
                var supported = document.getElementById;
                if (!supported) {
                    return false;
                }
                var elem = document.getElementById(elementId);
                if (!elem) {
                    return false;
                }
                if (elem.movement) {
                    clearTimeout(elem.movement);
                }
                if (!elem.style.left) {
                    elem.style.left = '0px';
                }
                if (!elem.style.top) {
                    elem.style.top = '0px';
                }
                var x = parseInt(elem.style.left);
                var y = parseInt(elem.style.top);
                var dist = 0;
                if (x == finalX && y == finalY) {
                    return true;
                }
                if (x < finalX) {
                    dist = Math.ceil((finalX - x) / 10);
                    x += dist;
                }
                if (x > finalX) {
                    dist = Math.ceil((finalX - x) / 10);
                    x -= dist;
                }
                if (y < finalY) {
                    dist = Math.ceil((finalX - y) / 10);
                    y += dist;
                }
                if (y > finalY) {
                    dist = Math.ceil((finalX - y) / 10);
                    y -= dist;
                }
                elem.style.left = x + 'px';
                elem.style.top = y + 'px';
                var repeat = 'moveElement(' + elementId + ',' + finalX + ',' + finalY + ',' + interval + ')';
                elem.meovment = setTimeout(repeat, interval);
            }
        }

        function generateHtmlTags() {
            function prepareSlideShow() {
                var supported = document.getElementsByTagName || document.getElementById;
                if (!supported) {
                    return false;
                }

                var linkList = document.getElementById('link-list');
                if (!linkList) {
                    return false;
                }

                var slideShow = document.createElement('div');
                slideShow.setAttribute('id', 'slide-show');
                var preview = document.createElement('img');
                preview.setAttribute('src', 'images/topics.gif');
                preview.setAttribute('alt', 'building blocks of web design');
                preview.setAttribute('id', 'preview');
                slideShow.appendChild(preview);

                var links = linkList.getElementsByTagName('a');
                for (var i = 0; i < links.length; i++) {
                    (function (i) {
                        links[i].onmouseover = function () {
                            moveElement('preview', i * -100, 0, 10);
                        };
                    }(i))
                }
            }

            function insertAfter(newElement, targetElement) {
                var parent = targetElement.parentNode;
                if (parent.lastChild == targetElement) {
                    parent.appendChild(newElement);
                } else {
                    parent.insertBefore(newElement, targetElement.nextSibling);
                }
            }
        }
    }
</script>
</body>
</html>